<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入用户名" id="ipt">
		
    <button>设置sessionStorage</button>
    <button>设置localStorage</button>
    <button>获取sessionStorage</button>
    <button>获取localStorage</button>
    <button>清除sessionStorage</button>
    <button>清除localStorage</button>
    <button>清空localStorage</button>
    <button>设置对象</button>

    <script>
        var btn = document.querySelectorAll('button');
        var ipt = document.querySelector('input');
        btn[0].onclick = function () {
            sessionStorage.setItem('name', ipt.value);
            ipt.value = '';
        }
        btn[1].onclick = function () {
            localStorage.setItem('name', ipt.value);
            ipt.value = '';
        }
        btn[2].onclick = function () {
            console.log(sessionStorage.getItem('name'));
        }
        btn[3].onclick = function () {
            console.log(localStorage.getItem('name'));
        }
        btn[4].onclick = function () {
            sessionStorage.removeItem('name')
        }
        btn[5].onclick = function () {
            localStorage.removeItem('name')
        }
        btn[6].onclick = function () {
            localStorage.clear()
        }
        btn[7].onclick = function () {
            var teacher = {
                name: '小红',
                age: 30,
                sex: '女',
                marry: 0
            }
            // 存储boolean类型 会用 0/1 代替  或者使用 含值 或者 null来类比
            localStorage.setItem('老师', JSON.stringify(teacher))
            console.log(JSON.parse(localStorage.getItem('老师')));
        }
    </script>
</body>
</html>